<template>
  <div class="overview-content">
    <!---->
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom:20px;">
        <div class="chart-wrapper inputTop">
          <ul class="flex-row">
            <li v-for="(item,index) in arr" :key="index" :class="active==index?'active':''" @click="tab(index)">{{ item }}</li>
          </ul>
        </div>
      </el-col>
    </el-row>
    <!---->
    <div>
      <my-table v-if="active == 0 " :table-data="arrTable">
        <el-table-column
          show-overflow-tooltip
          prop="leaseNo"
          label="租约编号"
          min-width="50%"
          align="center"
        >
          <template slot-scope="scope">
            <router-link :to="{path: 'leasepageProcess', query:{id:scope.row.id,isDetail:true}}" class="linkBtn">
              {{ scope.row.leaseNo }}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="status"
          label="状态"
          min-width="50%"
          align="center"
          :formatter="staFormat"
        />
        <el-table-column
          show-overflow-tooltip
          prop="beginDate"
          label="起始日期"
          min-width="50%"
          align="center"
          :formatter="myTimeDianbeginDate"
        />
        <el-table-column
          show-overflow-tooltip
          prop="endDate"
          label="截止日期"
          min-width="50%"
          align="center"
          :formatter="myTimeDianendDate"
        />
        <el-table-column
          show-overflow-tooltip
          prop="rent"
          label="租金"
          min-width="50%"
          align="center"
        />
      </my-table>
      <my-table v-if="active == 1 " :table-data="arrTable">
        <el-table-column
          show-overflow-tooltip
          prop="saleNo"
          label="售房编号"
          min-width="50%"
          align="center"
        >
          <template slot-scope="scope">
            <router-link
              :to="{path: 'salesProcess', query: { id: scope.row.id },
              }"
              class="linkBtn"
            >
              {{ scope.row.saleNo }}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="status"
          label="状态"
          min-width="50%"
          align="center"
          :formatter="staFormatSF"
        />
        <el-table-column
          show-overflow-tooltip
          prop="deliveryDate"
          label="起售日期"
          min-width="50%"
          align="center"
          :formatter="myTimeDiandeliveryDate"
        />
        <el-table-column
          show-overflow-tooltip
          prop="completeTime"
          label="售出日期"
          min-width="50%"
          align="center"
          :formatter="myTimeDiancompleteTime"
        />
        <el-table-column
          show-overflow-tooltip
          prop="salePrice"
          label="售价"
          min-width="50%"
          align="center"
        />
      </my-table>
      <my-table-two v-if="active == 2 " :table-data="arrTable">
        <el-table-column
          show-overflow-tooltip

          label="月份"
          min-width="50%"
          align="center"
        >
          <template slot-scope="scope">
            <span @click="openPage(scope.row)" :to="{path: '/billing/index', query:{}}" class="linkBtn">
              {{ dateFormat3(scope.row.billDate) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="收入"
          min-width="50%"
          align="center"
        >
          <template slot-scope="scope">
            <span>$ {{ scope.row.income }}</span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="支出"
          min-width="50%"
          align="center"
        >
          <template slot-scope="scope">
            <span>$ {{ scope.row.expend }}</span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="净收入"
          min-width="50%"
          align="center"
        >
          <template slot-scope="scope">
            $ {{ (scope.row.income *1 - scope.row.expend * 1).toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="结算日期"
          min-width="50%"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ dateFormat(scope.row.issueDate) }}</span>
          </template>
        </el-table-column>
      </my-table-two>
      <my-table-renting v-if="active == 3 " :table-data="arrTable">
        <el-table-column
          show-overflow-tooltip
          prop="type"
          label="报告类型"
          min-width="50%"
          align="center"
        >
          <template slot-scope="scope">
            <!-- <router-link :to="{path: '', query:{}}" class="linkBtn"> -->
            {{ scope.row.type == 0 ? '检查报告' : '验房报告' }}
            <!-- {{ staFormatBG(scope.row.type) }} -->
            <!-- </router-link> -->
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="checkDate"
          label="检查日期"
          :formatter="myTimeDiancheckDate"
          min-width="50%"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="issueDate"
          label="发送日期"
          :formatter="myTimeDianissueDate"
          min-width="50%"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="suggestion"
          label="维修建议"
          min-width="50%"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.suggestion">有</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="num5"
          label="操作"
          min-width="50%"
          align="center"
        >
        <template  slot-scope="scope">
              <span class="countFsColor" @click="handleClick(scope.row.id,1)">查看</span>
        </template>
       
        </el-table-column>
      </my-table-renting>
      <my-table-wx v-if="active == 4 " :table-data="arrTable">
        <el-table-column
          show-overflow-tooltip
          prop="itemName"
          label="维修项目"
          min-width="50%"
          align="center"
        >
          <template slot-scope="scope">
            <!-- <router-link :to="{path: '', query:{}}" class="linkBtn"> -->
            {{ scope.row.itemName }}
            <!-- </router-link> -->
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="beginDate"
          label="报修日期"
          min-width="50%"
          align="center"
          :formatter="myTimeDianbeginDate"
        />
        <el-table-column
          show-overflow-tooltip
          prop="endDate"
          label="维修完成日期"
          min-width="50%"
          align="center"
          :formatter="myTimeDianendDate"
        />
        <el-table-column
          show-overflow-tooltip
          prop="feeDollar"
          label="实际费用"
          min-width="50%"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="status"
          label="状态"
          min-width="50%"
          align="center"
          :formatter="staFormatWX"
        />
        <el-table-column
          show-overflow-tooltip
          prop="num5"
          label="操作"
          min-width="50%"
          align="center"
        >
        
        <template  slot-scope="scope">
               <span class="countFsColor"  @click="handleClick(scope.row.id,2)">查看</span>
        </template>
        </el-table-column>
      </my-table-wx>
      <my-table-renting v-if="active == 5 " :table-data="arrTable">
        <el-table-column
          show-overflow-tooltip
          prop="type"
          label="费用类型"
          min-width="50%"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.itemName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="beginDate"
          label="产生日期"
          min-width="50%"
          align="center"
          :formatter="myTimeDianbeginDate"
        />
        <el-table-column
          show-overflow-tooltip
          prop="payDate"
          label="缴费日期"
          min-width="50%"
          align="center"
          :formatter="myTimeDianpayDate"
        />
        <el-table-column
          show-overflow-tooltip
          prop="feeDollar"
          label="费用金额"
          min-width="50%"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="status"
          label="状态"
          min-width="50%"
          align="center"
          :formatter="myTimeDian"
        />
        <el-table-column
          show-overflow-tooltip
          prop="num5"
          label="操作"
          min-width="50%"
          align="center"
        >
         
                  <template  slot-scope="scope">
               <span class="countFsColor" @click="handleClick(scope.row.id,3)">查看</span>
        </template>
        </el-table-column>
      </my-table-renting>
      <my-table-file v-if="active == 6 " :table-data="arrTable" :houseid="houseid" @getTable="tableResh" ref="filePagebx">
        <el-table-column
          show-overflow-tooltip
          prop="name"
          label="保险名称"
          min-width="50%"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="company"
          label="保险公司"
          min-width="50%"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="price"
          label="保费"
          min-width="50%"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="startDate"
          label="起保日期"
          min-width="50%"
          align="center"
          :formatter="myTimestartDate"
        />
        <el-table-column
          show-overflow-tooltip
          prop="endDate"
          label="截止日期"
          min-width="50%"
          align="center"
           :formatter="myTimeendDate"
        />
        <el-table-column

          prop="file"
          label="附件"
          min-width="50%"
          align="center"
         
        >
          <template slot-scope="scope"  >
            <div class="koy">
            <span class="countFsColor wspan" @click="open(scope.row,index)" v-if="scope.row.arr.length > 0" v-for="(item,index) in scope.row.arr" :key="index">  {{ item }} </span>
            <span class="countFsColor" @click="open(index)" v-if="scope.row.arr.length <= 0" >无</span>
            </div>
          </template>
          <!-- <template slot-scope="scope" v-if="scope.row.arr.length <= 0">

          </template> -->
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="num5"
          label="操作"
          min-width="50%"
          align="center"
        >
          <template v-slot:default="scoped">
            <span class="countFsColor" @click="delFileView(scoped.row.id)">删除</span>
          </template>
        </el-table-column>
      </my-table-file>
      <my-table-file-true v-if="active == 7" ref="filePage" :houseid="houseid">
        <el-table-column
          show-overflow-tooltip
          prop="fileName"
          label="文件名称"
          min-width="50%"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="createdTime"
          :formatter="myTime"
          label="上传日期"
          min-width="50%"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="fileType"
          :formatter="fileTypeFormat"
          label="文件类型"
          min-width="50%"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="num5"
          label="操作"
          min-width="50%"
          align="center"
        >
          <template v-slot:default="scoped">
            <a class="countFsColor mtlr5" @click="handleFileView(scoped.row.fileUrl)">查看</a>
            <a class="countFsColor mtlr5" @click="handleFileDownload(scoped.row.fileUrl,scoped.row.fileName)">下载</a>
            <a class="countFsColor mtlr5" @click="handleFileRemove(scoped.row.id)">删除</a>
          </template>
        </el-table-column>
      </my-table-file-true>
      <my-table-renting-admin v-if="active == 8" ref="houseManagePage" :houseid="houseid">
        <el-table-column
          show-overflow-tooltip
          prop="roleName"
          label="管理角色"
          min-width="50%"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="name"
          label="名称"
          min-width="50%"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="contact"
          label="联系方式"
          min-width="50%"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          label="操作"
          min-width="50%"
          align="center"
        >
          <template v-slot:default="scoped">
            <a class="countFsColor mtlr5" @click="deleteHouseManage(scoped.row.id)">删除</a>
          </template>
        </el-table-column>
      </my-table-renting-admin>
    </div>
    <!---->

    <!--文件删除-->
    <myModal :obj="obj" @close="close" @save="save">
      <p class="text-center">确定删除该文件？</p>
    </myModal>
    <!---->
    <!--保险删除-->
    <myModal :obj="objbx" @close="close" @save="savebx">
      <p class="text-center">确定删除该保险？</p>
    </myModal>
    <!---->
    <!--管理删除-->
    <myModal :obj="objglxx" @close="close" @save="saveglxx">
      <p class="text-center">确定删除该管理信息？</p>
    </myModal>
    <!---->
  </div>
</template>

<script>
import myTable from './tableDetail' // 租房-0 售房-1 
import myTableTwo from './tableDetailtwo' //  账单-2
import myTableRenting from './tableDetailRenting' // 报告-3  缴费-5
import myTableWx from './tableDetailWx' // 维修-4
import myTableFile from './tableDetailFile' // 保险-6
import myTableFileTrue from './tableDetailFileTrue' // 文件-7
import myTableRentingAdmin from './tableDetailRentingAdmin' // 管理-8
import { 
  fileTypeFormat, 
  dateFormat,
  myTimeDianbeginDate,
  myTimeDianendDate,
  myTimeDiandeliveryDate, 
  dateFormat3,
  myTimestartDate,
  myTimeendDate, 
  downImg, 
  myTimeDian,
  myTime, 
  staFormat, 
  staFormatSF, 
  staFormatBG, 
  staFormatWX, 
  staFormatJF,
  myTimeDiancompleteTime ,
  myTimeDiancheckDate,
  myTimeDianissueDate,
  myTimeDianpayDate
  } from '@/utils/common'
import { getHouseFileListByHouseId, remove } from '@/api/houseFile'
import { getHouseManageListByHouseId, removeHouseManage } from '@/api/houseManage'
import myModal from '@/components/Modal'
import { getHouseZY, getHouseSF, getHouseZD, getHouseBG, getHouseWX, getHouseJF, getHouseBX ,removeBX} from '@/api/houseFile'
export default {
  components: {
    myTable,
    myTableRenting,
    myTableFile,
    myTableFileTrue,
    myTableRentingAdmin,
    myModal,
    myTableTwo,
    myTableWx
  },
  props: {
    houseid: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      myTimeDianpayDate,
      myTimeDianissueDate,
      myTimeDiancheckDate,
      myTimeDiancompleteTime,
      myTimeDiandeliveryDate,
      myTimeDianbeginDate,
      myTimeDianendDate,
      myTimestartDate,
      myTimeendDate,
      myTime,
      dateFormat3,
      staFormatJF,
      staFormatWX,
      staFormatBG,
      staFormat,
      staFormatSF,
      myTimeDian,
      active: 0,
      arr: ['租约', '售房', '账单', '报告', '维修', '缴费', '保险', '文件', '管理信息'],
      arrTable: [],
      fileTypeFormat,
      dateFormat,
      obj: {
        show: false,
        title: '提示',
        width: '447px'
      },
      objbx: {
        show: false,
        title: '提示',
        width: '447px'
      },
      objglxx: {
        show: false,
        title: '提示',
        width: '447px'
      },
      id: '',
      idbx:'',
      idglxx:''
    }
  },
  mounted() {
    console.log('houseid1:', this.houseid)
    getHouseZY(this.houseid).then(response => {
      console.log(response)
      this.arrTable = response.data
    })
  },

  methods: {
    delFileView(val){
      this.idbx = val
      this.objbx.show = true
    },
     tab(v) {
      this.arrTable = [];
      this.active = v
      if (v == 0) {
        getHouseZY(this.houseid).then(response => {
          console.log(response)
          this.arrTable = response.data
        })
              
        return
      }
      if (v == 1) {
        getHouseSF(this.houseid).then(response => {
          console.log(response)
          this.arrTable = response.data
        })
        return
      }
      if (v == 2) {
        getHouseZD(this.houseid).then(response => {
          console.log(response)
          this.arrTable = response.data
        })
        return
      }
      if (v == 3) {
        getHouseBG(this.houseid).then(response => {
          console.log(response)
          this.arrTable = response.data
        })
        return
      }
      if (v == 4) {
        getHouseWX(this.houseid).then(response => {
          this.arrTable = response.data
        })
        return
      }
      if (v == 5) {
        getHouseJF(this.houseid).then(response => {
          this.arrTable = response.data
        })
        return
      }
      if (v == 6) {
        getHouseBX(this.houseid).then(response => {
         
          response.data.forEach(function(item){
              item.arr = []
              if(item.file != null){
              item.file = item.file.split(",")
              item.file.forEach(function(list){
                    let index = list.lastIndexOf('/')
                    let filename = list.substr(index + 1)
                    let catalog = list.substr(0, index + 1)
                    item.arr.push(filename)  
              })
              }

          })
          this.arrTable = response.data
        })

        return
      }

    },
    openPage(row){
            const routeUrl = this.$router.resolve({ path: '/view', query: { billId: row.billId, type: '1' }})
            window.open(routeUrl.href, '_blank')
    },
    open(row,index){
      console.log(index)
      console.log(row)
      window.open(row.file[index], '_blank');
    },
    save() {
      const that = this
      remove(that.id).then(response => {
        that.obj.show = false
        this.$refs.filePage.queryFileList()
      })
    },
    savebx() {
      const that = this
      removeBX(that.idbx).then(response => {
        that.objbx.show = false
        this.tab(6)
      })
    },
    saveglxx() {
      const that = this
      removeHouseManage(that.idglxx).then(response => {
        that.objglxx.show = false
        that.$refs.houseManagePage.queryFileList()
      })
    },
    tableResh() {
      this.tab(6)
    },
    close() {
      this.obj.show = false
    },
    handleClick(id,index) {
      if(index == 1){  
          const routeUrl = this.$router.resolve({ path: '/report', query: { id: id}})
          window.open(routeUrl.href, '_blank')
      }
      if(index == 2){     //维修
         const routeUrl = this.$router.resolve({ path: '/billing/repair', query: { id: id}})
         window.open(routeUrl.href, '_blank')
        
      }
      if(index == 3){  //缴费
           const routeUrl = this.$router.resolve({ path: '/billing/payment', query: { id: id,}})
           window.open(routeUrl.href, '_blank')
      }

      console.log(':id', id)
    },
    deleteHouseManage(val) {
      const that = this
      that.idglxx = val
      that.objglxx.show = true

    },
    handleFileView(path) {
      console.log(':path', path)
      window.open(path, '', '', '')
    },
    handleFileDownload(path, name) {
      console.log(':path', path)
      //  window.location.href = path
      downImg(path, name)
    },
    handleFileRemove(id) {
      this.id = id
      this.obj.show = true
    },
    queryFileList() {
      getHouseFileListByHouseId(this.houseid).then(response => {
        console.log(response)
        this.tableData = response.data
      })
    },
    getHouseManageListByHouseId() {
      getHouseManageListByHouseId(this.houseid).then(response => {
        console.log(response)
        this.tableData = response.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.koy{display: flex;justify-content: center;align-items: center;flex-wrap: wrap;}
.koy span{margin-left: 3px;margin-right: 3px;}
.wspan{display: inline-block;}
.overview-content{margin-bottom: -25px;margin-top: 10px;}
.inputTop li.active{background: #5AC6B7;color: #fff;}
.inputTop li{font-family: 'Roboto'; background: #DDE1E1;cursor: pointer; margin-right: 6px; color: #1a1a1a;width: 105px;height: 45px;border-radius: 4px;line-height: 45px;text-align: center;font-size: 14px;}
</style>

